<template>
        <div style="width: 100%;height: 100%;" ref="tu">

        </div>
</template>
    
<script setup lang='ts'>
import { getchang } from '../request/api';
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue'

let tu=ref()

let option = ref({
  legend: {
    icon: 'circle',
    textStyle: {
      color: '#fff'
    },
    itemStyle: {
      color: 'rgb(255, 0, 135)'
    },
    show: false
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: '8px'
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    data: ['图书馆', '体育馆', '实验楼', '超市', '会议楼']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      inside: false,
      show: true
    }
  },
  grid: {
    height: '70',
    top: '30'
  },
  series: [
    {
      data: [10, 46, 64, 10, 10],
      type: 'bar',
      stack: 'a',
      name: '人数',
      itemStyle: {
        borderRadius: [50, 50, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#9f0bff' },
          { offset: 0.5, color: '#701dff' },
          { offset: 1, color: '#3b30ff' }
        ])
      },
      showBackground: true,
      backgroundStyle: {
        borderRadius: [50, 50, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#371787bc' },
          { offset: 0.5, color: '#37178795' },
          { offset: 1, color: '#37178720' }
        ])
      },
      barWidth: '30%', // 控制柱状图的宽度
      barGap: '10%' // 设置柱状图之间的间隔为0%
    }
  ]
})

onMounted(()=>{
    getchang().then((res)=>{
        let myChart = echarts.init(tu.value)
         option.value.xAxis.data = res.data.data.map((item, index) => {
      return item.title
    })
    option.value.series[0].data = res.data.data.map((item, index) => {
      return item.value
    })
     myChart.setOption(option.value)
    })
    
   
})
    
</script>
    
<style>
    
</style>